<template>
    <div class="kve">
      <div class="row" v-for="(r, i) in rowsLocal" :key="r._uid">
        <el-input v-model="rowsLocal[i].key" placeholder="键名" />
        <el-input v-model="rowsLocal[i].value" placeholder="键值" />
        <el-button circle @click="remove(i)">
          <el-icon><i class="el-icon-delete"></i></el-icon>
        </el-button>
      </div>
  
      <div class="ops">
        <el-button type="primary" link @click="add">＋ 添加</el-button>
      </div>
  
      <el-divider />
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </template>
  
  <script setup>
  import { reactive, watch, toRaw } from 'vue'
  
  const props = defineProps({
    /** [{key:'', value:''}] */
    modelValue: { type: Array, default: () => [] }
  })
  const emit = defineEmits(['update:modelValue','save'])
  
  const rowsLocal = reactive(
    (props.modelValue || []).map(x => ({ ...x, _uid: crypto.randomUUID?.() || Math.random().toString(36).slice(2) }))
  )
  
  watch(() => props.modelValue, v => {
    // 外部变更时同步内部
    const list = (v || []).map(x => ({ ...x, _uid: crypto.randomUUID?.() || Math.random().toString(36).slice(2) }))
    rowsLocal.splice(0, rowsLocal.length, ...list)
  })
  
  function add() {
    rowsLocal.push({ key: '', value: '', _uid: crypto.randomUUID?.() || Math.random().toString(36).slice(2) })
    emit('update:modelValue', rowsLocal.map(({_uid, ...o}) => o))
  }
  function remove(i) {
    rowsLocal.splice(i,1)
    emit('update:modelValue', rowsLocal.map(({_uid, ...o}) => o))
  }
  function save() {
    // 输出干净数据
    const out = rowsLocal.map(({_uid, ...o}) => o)
    emit('save', toRaw(out))
  }
  </script>
  
  <style scoped>
  .kve { padding: 4px; }

/* 行布局更紧凑，像截图那样两列输入 + 圆形删除按钮 */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

/* 输入框边角更圆，视觉更“轻” */
:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e5e7eb inset, 0 1px 2px rgba(0,0,0,.02);
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--ft-primary) inset, 0 0 0 2px rgba(64,158,255,.08);
}

/* 圆形幽灵删除按钮（和右侧小垃圾桶接近） */
:deep(.el-button.is-circle) {
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
:deep(.el-button.is-circle:hover) {
  border-color: #ffdad6;
  background: #fff5f5;
}

/* “添加”区域与按钮 */
.ops { margin: 8px 0 2px; }
:deep(.el-button.is-link) {
  padding-left: 0;
  color: var(--ft-primary);
}

/* 分割线更轻一些、留白接近截图 */
:deep(.el-divider) {
  margin: 12px 0;
  background-color: #f2f3f5;
}

/* 底部主按钮更圆，阴影轻一点 */
:deep(.el-button.el-button--primary) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(64,158,255,.18);
}

  </style>
  